<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入Bootstrap默认样式 -->
    <link rel="stylesheet" type="text/css"
          href="css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript"
            src="js/jquery.serializejson.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/carts.css">
    <style type="text/css">
        .red {
            background-color: lightgreen;
        }

        .green {
            background-color: darksalmon;
        }
    </style>
</head>
<body style="margin: 0px;background-repeat:no-repeat;
            background-attachment: fixed;
            background-origin: border-box;
            background-size:cover;
		">
<div id="admission" style="margin-top:-12px;">
    <ol class="breadcrumb" ></ol>
    <div>
        <span style="margin: 50px 40%;font-size: 30px" >材料清单表</span>
    </div>
    <div>
        <table class="table table-hover">
            <tr>
                <td>编号</td>
                <td>材料id</td>
                <td>材料名称</td>
                <td>材料型号</td>
                <td>材料价格</td>
                <td>材料数量</td>
                <td>总价</td>
                <td>供应商</td>
                <td>项目ID</td>
                <td>阶段</td>
            </tr>
            <tbody>
            <tr v-for="(li,index) in list" >
                <td v-text="index+1"></td>
                <td v-text="li.materialId"></td>
                <td v-text="li.materialName"></td>
                <td v-text="li.materialModel"></td>
                <td v-text="li.materialPrice"></td>
                <td ><input type="number"  v-model="li.materialListNum" ></td>
                <td  v-if="li.materialListNum<0"><span>商品数量不能是负数</span></td>
                <td><span v-text="li.materialListTotal=li.materialListNum*li.materialPrice+0.0"></span>$</td>
                <td v-text="li.materialSupplier"></td>
                <td v-text="li.projectId=project.projectId"></td>
                <td v-text="li.materialBak1"></td>
            </tr>
            </tbody>
        </table>
        <input type="submit"  @click="addadmission()" value="提交">
    </div>
    </div>
</div>
    <script type="text/javascript">
        /*思路，通过传进来的材料id寻找当前需要的材料，根据查询到的材料填写数量，随后将项目id一同带入*/
        /*获取传过来的参数*/
        var url=window.location.href;
        var projectId= 2;//获得材料项目id
        var materialBak1= url.substring(url.lastIndexOf('=')+1);//获得材料id
        /*取到传过来的参数*/
      /*  var searchURL = window.location.search;
        searchURL = searchURL.substring(1, searchURL.length);
        var targetPageId = searchURL.split("&")[0].split("=")[1];
        var targetPageId = searchURL.split("&")[1].split("=")[1];*/
        var app = new Vue({
            el: '#admission',
            data: {
                list:[],
                /*通过阶段id查找阶段*/
                example: {
                    materialBak1:2,
                },
                project:{
                    projectId,
                },
                onedecMaterialLists:{
                    materialId:0,
                    materialListNum:0,
                    materialListTotal:0.0,
                    projectId:0,
                    operationNum:0,
                    materialListStatus:0,
                    materialListBak1:null,
                    materialListBak2:null,
                    materialListBak3:null
                }

            },
            created: function () {
                this.select1();
            },
            methods: {
                /*通过阶段id查找阶段*/
                select1: function () {
                    var _this = this;
                    $.ajax({
                        type: "get",
                        url: "/selectNameandModl",
                        data: _this.example,
                        dataType: 'json',
                        success: function (data) {
                            _this.list =data.data;
                            console.log(data)
                            console.log(data.data);
                        },
                        error: function (data) {
                            alert(data.message);
                        },
                    });
                },
                /*
                添加
                 */
                addadmission: function () {
                    var onedecMaterialLists =new Array();
                    var _this = this;
                    for (let i=0;i<_this.list.length;i++){
                        if(_this.list[i].materialListNum>0){
                            _this.onedecMaterialLists.materialId=_this.list[i].materialId;
                            _this.onedecMaterialLists.materialListNum=_this.list[i].materialListNum;
                            _this.onedecMaterialLists.materialListTotal=_this.list[i].materialListTotal;
                            _this.onedecMaterialLists.projectId=_this.list[i].projectId;
                            _this.onedecMaterialLists.operationNum=_this.list[i].materialBak1;
                            onedecMaterialLists[i]=_this.onedecMaterialLists;
                        }

                    }

                    $.ajax({
                        type: "post",
                        url: "/addMaterialList",
                        data: JSON.stringify(onedecMaterialLists),//obj转json
                        dataType: 'json',
                        contentType:'application/json;charset=utf-8',
                        success: function (data) {
                            if(data.msg==200){
                                alert("添加成功");
                                history.go(0);
                            }else{
                                alert("添加失败");
                            }
                        },
                        error: function (data) {
                            alert(data.message);
                        }
                    });
                },
                /**
                 * 添加集合
                 */
                add:function () {
                    console.log("打印打印打印打印"+onedecMaterialLists);
                }
            }
        });
    </script>
</body>
</html>
